<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../static/layui/css/layui.css"/>
	<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css" />
	<style>
		*{
			margin: 0 auto;
			padding: 0;
		}
		.my-container{
			margin-left: 100px;
			border-radius: 5px;
			padding: 10px;
			margin-top: 30px;
			width: 800px;
			height: auto;
		}
		.my-container .my-input{
			width: 200px;
		}
		.layui-upload-list img{
			margin: 2px;
			width: 368px;
			height: 300px;
		}
		.layui-quote-nm{
			background-color:white
		}
		.btn-div{
			float: right;
		}
	</style>
	<body >

		<div class="my-container">
			<h1>请输入书籍的信息</h1>
			<hr/>
			<form id="form" class="layui-form" action="">
			  <div class="form-group">
			    <label for="name">书名</label>
			    <input type="text" class="form-control my-input" id="name" name="name" lay-verify="required" placeholder="请输入书名">
			  </div>
			  
			  <div class="form-group">
			    <label for="author">作者</label>
			    <input type="text" class="form-control my-input" id="author" name="author" lay-verify="required" placeholder="请输入作者">
			  </div>
			  
			  <div class="form-group">
			    <label for="amount">价格</label>
			    <input type="text" class="form-control my-input" id="amount" name="amount" lay-verify="required|confirmAmount" placeholder="请输入价格">
			  </div>

			  <div class="form-group">
			    <label for="press">出版社</label>
			    <input type="text" class="form-control my-input" id="press" name="press" lay-verify="required" placeholder="请输入出版社">
			  </div>
			  
			  <div class="form-group">
			    <label for="introduce">商品描述</label>
			    <textarea class="form-control" id="introduce" name="introduce" lay-verify="required" rows="3"></textarea>
			  </div>
			  
			  <div class="layui-upload">
			      <button type="button" class="layui-btn" id="myUpload">多图片上传</button>
			      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			          预览图：
			          <div class="layui-upload-list" id="myImg"></div>
			      </blockquote>
			  </div>
				<div class="layui-form-item">
					<div class="btn-div layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="editGoods">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	
	<script src="../static/js/jquery-3.0.0.min.js" type="text/javascript"></script>
	<script src="../static/layui/layui.js" charset="utf-8"></script>
	<script>
		var url = location.search;
		var id = null;
		if(url!=null && url!=""){
			let index =  url.lastIndexOf("=");
			id = url.substring(index+1,url.length);
		}
		$(document).ready(function(){
			if(id !=null && id!=""){
				$.ajax({
					url:"/goods/getGoods",
					type:"post",
					data:{
						"id" : id
					},
					success:function(result){
						if(result.code==200){
							let goods = result.data;
							$("#name").attr("value",goods.name);
							$("#author").attr("value",goods.author);
							$("#amount").attr("value",goods.amount);
							$("#press").attr("value",goods.press);
							$("#introduce").html(goods.introduce);
							let imgs = goods.image.split("/;");
							for(let i=0;i<imgs.length;i++){
								$('#myImg').append('<img src="'+ imgs[i] +'" alt="'+ imgs[i] +'" class="layui-upload-img">')
							}
						}else{
							layer.msg(result.msg,{icon: 2,time:2000});
						}
					}
				})
			}
		});
	    layui.use(['upload', 'element','form'], function(){
	        var $ = layui.jquery
				,form = layui.form
	            ,upload = layui.upload
	            ,element = layui.element
				,reg=/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;

			form.verify({
				//校验价格格式
				confirmAmount:function(value){
					if(!reg.test($("#amount").val())){
						return '提示：价格最多使用两位小数！';
					}
				},
			});
			//多图片上传
			upload.render({
				elem: '#myUpload'
				,auto: false
				,multiple: true
				,acceptMime: 'image/*'
				,number:4,
				size:1024
				,choose: function(obj){
					$('#myImg').empty();
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result){
						$('#myImg').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
					});
				}
			});
			form.on('submit(editGoods)', function(data){
				data = data.field;
				var image = "";
				var img = $("#myImg").children("img");
				for(let i=0;i<img.length;i++){
					image += (i==(img.length-1)?img[i].src:img[i].src+"/;");
				}
				if(image=="" || image==null){
					image = "../static/img/2.png";
				}
				$.ajax({
					url:"/goods/edit",
					type:"post",
					data:{
						"id" : id,
						"uid" : sessionStorage.getItem("uid"),
						"press" : data.press,
						"name" : data.name,
						"author" : data.author,
						"introduce" : data.introduce,
						"amount" : data.amount,
						"image":image
					},
					headers: {
						Authorization: sessionStorage.Authorization
					},
					success:function(result){
						if (result.code == 200) {
							layer.msg("上架成功！",{icon: 1,time:2000,},function(){
								if(id!=null && id!=""){
									window.location.replace("./goodsDesc.html?id="+id);
								}else{
									window.location.replace("../index.html");
								}
							});
						}else if(result.code==401){
							sessionStorage.removeItem("Authorization");
							layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
						}else{
							layer.msg(result.msg,{icon: 2,time:2000});
						}
					}
				});
				return false;
			});
	    });
	</script>
	</body>
</html>
